<template>
<div>
  <!-- 新增 --> <!-- 搜索框 -->
  <div style="height: 25px;line-height: 50px;margin: 15px 0; display: flex;
            justify-content: center;
            align-items: center;">
    <div style="height: 50px;line-height: 50px;margin-right: 10px">
      <el-button type="primary" @click="add">新增<i class="el-icon-circle-plus-outline"></i></el-button>
    </div>
    <el-input
      style="width: 200px;"
      clearable
      placeholder="请输入人员姓名"
      suffix-icon="el-icon-search"
      type="text"
      v-model="search">

    </el-input><el-button class="ml-5" type="primary" @click="load">搜索</el-button>
  </div>
  
  
<!-- 人员信息表 -->
  <el-table
    :data="tableData"
    style="width: 100%"
    v-loading="loading"
    :row-class-name="tableRowClassName">
    <el-table-column prop="uid" label="工号" width="105px"></el-table-column>
    <el-table-column prop="name" label="姓名" width="80px"></el-table-column>
    <el-table-column prop="age" label="年龄" width="50px"></el-table-column>
    <el-table-column prop="department" label="部门" width="100px"></el-table-column>
    <el-table-column prop="phone" label="联系方式"></el-table-column>
    <el-table-column prop="idnum" label="身份证号" width="150px"></el-table-column>
    <el-table-column prop="entry" label="入职时间" ></el-table-column>
    <el-table-column prop="address" label="居住地址"></el-table-column>
    <el-table-column prop="email" label="邮箱" width="100px"></el-table-column>

    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.row)"/>
        <el-popconfirm title="确定删除记录吗" @confirm="handleDelete(scope.row.uid)">
          <template #reference>
            <el-button type="danger" icon="el-icon-delete" circle />
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
<!-- 分页 -->
  <div style="padding:10px 0;display: flex;
            justify-content: center;
            align-items: center;">
    <el-pagination
      style=" position: absolute;margin: auto"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      :pager-count="7"
      :total="total">
    </el-pagination>
  </div>


<!-- 人员添加，修改表单 -->
  <el-dialog :visible.sync="dialogVisible" width="30%">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="工号" prop="uid">
        <el-input :disabled="true" v-model="ruleForm.uid" placeholder="工号为系统自动生成"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input  v-model.number="ruleForm.age"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio label="男" class="el-icon-male"></el-radio>
          <el-radio label="女" class="el-icon-female"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="联系方式" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="idnum">
        <el-input v-model="ruleForm.idnum"></el-input>
      </el-form-item>
      <el-form-item label="部门" prop="department">
        <el-select v-model="ruleForm.department" placeholder="请选择所属部门">
          <el-option label="云平台维护室" value="云平台维护室"></el-option>
          <el-option label="现场组" value="现场组"></el-option>
          <el-option label="客户经理" value="客户经理"></el-option>
          <el-option label="人事部" value="人事部"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="入职时间" required>
        <el-col :span="16">
          <el-form-item prop="entry">
            <el-date-picker  value-format="yyyy-MM-dd" placeholder="选择日期" v-model="ruleForm.entry" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="居住地址" prop="address">
        <el-input type="textarea" v-model="ruleForm.address"></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱" prop="email">
        <el-input type="textarea" v-model="ruleForm.email"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>
</div>
</template>

<script>
import request from "../../utils/request";


export default {
  name: "UserList",

  data(){
    return{
      search: '',
      dialogVisible: false,
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      ruleForm: {
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'change' },
        ],
        age: [
          { required: true,message: '请输入年龄', trigger: 'change' },
          { type : 'number', message: '请输入正确数字'}
        ],
        department: [
          { required: true, message: '请选择所属部门', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请填写联系方式', trigger: 'change' },
        ],
        idnum: [
          { required: true, message: '请输入身份证号码', trigger: 'change' }
        ],
        entry: [
          { required: true, message: '请选择入职时间', trigger: 'change' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请填写现居住地址', trigger: 'change' }
        ]
      },
      loading: true

  }
  },
  created() {
    this.load()
  },
  methods:{
    tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
    //格式化日期列
    dateFormatter(row,column){
      let datetime = row.entry;
      if(datetime){
        datetime = new Date(datetime);
        let y = datetime.getFullYear() + '-';
        let m = datetime.getMonth()+1 + '-';
        let d = datetime.getDate();
        return y + m + d;
      }
      return ''
    },
    //页面加载时，将数据传输给后端，后端数据渲染res.data.records到前端tableData
    load(){
      request.get("/sys/user/selectAll",{
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        if (res.code === '403'){
          this.$message({
              type: "error",
              message: res.msg
            })
          }
        console.log(res)
        console.log(this.search)
        this.tableData = res.data.records
        this.loading = false
        console.log(this.tableData)
        this.total = res.data.total
      })
    },
    //新增按钮触发事件 添加记录弹窗
    add(){
      this.dialogVisible = true;
      this.ruleForm = {};
    },
    //将弹窗内ruleForm表单数据传给后端，后端将数据
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.ruleForm.uid){ //表单中有工号元素 则是执行更新操作
        request.put("/sys/user/update",this.ruleForm).then(res =>{
          console.log(res);
          // console.log(this.ruleForm)
          if (res.code === '1'){
            this.$message({
              type: "success",
              message: "修改信息成功"
            })
          } else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load() //刷新
          this.dialogVisible = false
        });
        this.load() //刷新
        this.dialogVisible = false
      }else { //新增
        request.post("/sys/user/add",this.ruleForm).then(res =>{
          console.log(res);
          // console.log(this.ruleForm)
          if (res.code === '1'){
            this.$message({
              type: "success",
              message: "新增用户成功"
            })
          } else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load() //刷新
          this.dialogVisible = false
        });
      }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      
    },
    //重置新增 表单内容
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //表格编辑功能
    handleEdit(row){
      this.ruleForm = JSON.parse(JSON.stringify(row)) //与之前对象隔离开,避免浅拷贝问题
      this.dialogVisible = true;
    },
    //表格删除功能
    handleDelete(uid){
      console.log(uid)
      request.delete("/sys/user/delete/"+uid).then(res=>{
        if (res.code === '1'){
          this.$message({
            type: "success",
            message: "删除成功"
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.load()  //删除后重新加载
      })
    },
    handleSizeChange(pageSize) {  //改变当前每页显示个数触发
      this.pageSize = pageSize;
        this.load()
    },
    handleCurrentChange(currentPage) {  //改变当前页码 触发
      this.currentPage = currentPage;
      this.load()
    }
  }

}
</script>

<style >

.el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
